關於工程師這個職位聽起來厲害厲害的
在與同學或朋友聊天中介紹自己其實也真的蠻爽的

但其實每個職業都有它背後的辛酸
看不到那塊使著人們趨之若鶩的跑進來當工程師

大致有三種

1. 弱一點的進來沒多久後離開，普渡眾生
2. 不要臉又不長進，死巴在這個行業寫一堆爛東西給人修
3. 發現真的是興趣，每天像著了魔式的不斷寫不斷學

我大概是2吧(´・ω・`)
小農我謙虛即使我知道我是3
就是覺得東西寫得難看
以後自己修也覺得很噁心，所以為了未來的自己上班還是認真點

最近又在後端java 的 annotation真的是很神奇
點進去源代碼根本看不懂它是怎麼實現的
然後就莫名其妙地可以用，我也就這樣莫名其妙地用著༼ ༎ຶ ෴ ༎ຶ༽

然後關於後端框架因為小農寫的是java所以常用S2SH
大家都說生活不能活在框架裡
但工程師不斷不斷把自己丟入別人的框架之中
然後去揣摩別人的思想

因為你不照著它寫，它就給你紅字，很標準的任性。･ﾟ･(つд`ﾟ)･ﾟ･

例如寫了java spring後一下要用new一下要用@Resource
甚麼時候用哪個呢?

說真的，我是憑感覺，但都沒報錯
很糟糕的只知其然不知其所以然，小農懺悔

好的，今天來寫寫昨天說好的流程控制吧(ﾟ∀ﾟ)

讓我們來簡單請出之前的範例
範例在這

1. Scss的@IF系列
   • 格式:
     • @IF(expression){}@else if(expression){}@else{}
   • 規範:如同其他語言，通常都會給一個else作為預設值的結尾，因為if常常被放入@function與@mixin
   • 說明:這個還真不知道要怎麼說明...如果表達式裡面為ture的話便會執行{}之內的東西，唯一比較需要注意的是如果是放顏色的，或著其他必須要有的屬性的話，請記得給它一個@else

  @if $name != white{
      .button {
        border-color: map-get($value, clo2);  
      }
    }

以附的範例來說的話因為我太懶，所以把.button的東西宣告在別的地方，不然應該是這樣寫

.button {
    @if (($name == grey) or ($name == blue)){
        border-color:map-get($value, clo2);
    }
    @else{
        border-color:#27232F;   
    }
}
   

是的，這樣比較好(或著其他各種表達式，我相信你們懂得)
因為未來難說客戶會不會突然跟你說我要加粉紅色
然後出來粉紅色的背景，前面顏色卻很怪

(小農懺悔*2，我害我同事滿臉問號過)

2. Scss的@for
   • 格式:@for $i from start through end
   • 說明:並不能去偵測物件長度，就只是很單純的從start跑到end，通常是拿來用跑出字型大小，顏色深淺的迴圈，以及有時候對於響應式去偵測螢幕大@media screen and (max-width: XXXpx)諸如此類比較規則的東西
   • PS:順帶一提，如果start比end小，它會自動倒著跑例如:5~1

example:

@for $i from 1 through 4 { 
    .h#{$i}{ 
        font-size: ($i*10)px
    }
}

編譯後長這樣

.h1 {
  font-size: 10 px;
}

.h2 {
  font-size: 20 px;
}

.h3 {
  font-size: 30 px;
}

.h4 {
  font-size: 40 px;
}

3. Scss的@each
   • 格式:
     • @each $value in list
     • @each $key,$value in list
   • 規範:其實不只可以丟list，還可以丟"類似"這篇obj的東西，SCSS很曖昧，我也不清楚這篇寫的那個變數集合的專有名詞中文叫甚麼，但跟JS陣列很像就叫陣列吧
   • 說明:進階寫法請點這篇它藍藍的有連結，它就是遍歷一個陣列然後把裡面的值一一取出，而雙參數就是給物件使用

example:

$list: p1 p2 p3 p4 p5;
 @mixin images-url { 
     @each $p in $list {
          .img-#{$p} {
               background: url("/images/#{$p}.png") no-repeat; 
            } 
    } 
}
.picturelist {
   @include images-url;
}

編譯後長這樣

.picturelist .img-p1 {
  background: url("/images/p1.png") no-repeat;
}

.picturelist .img-p2 {
  background: url("/images/p2.png") no-repeat;
}

.picturelist .img-p3 {
  background: url("/images/p3.png") no-repeat;
}

.picturelist .img-p4 {
  background: url("/images/p4.png") no-repeat;
}

.picturelist .img-p5 {
  background: url("/images/p5.png") no-repeat;
}

有for有if，當然少不了while
4. Scss的@while
* 格式:@while (expression){dothing}
* 說明:其實不管是甚麼語言我都蠻少用while的因為後來幾乎所有語言都有foreach這東西，因為要多寫一行控制有點麻煩，除非類似java的hasnext，不然很少使用
*但還是得說明
example:

$ctrl: 4;
$width: 20px;

@while $ctrl>0 {
  .width-#{$ctrl} {
    width: $width + $ctrl;
  }

  $ctrl: $ctrl - 1;
}

編譯後長這樣

.width-4 {
  width: 24px;
}

.width-3 {
  width: 23px;
}

.width-2 {
  width: 22px;
}

.width-1 {
  width: 21px;
}

明天來寫寫我的常用包好了
例如畫面置中、長寬設定
SCSS來到倒數幾篇
每次貼到IT幫上有點不好意思
都白白的

那我們明天見啦!!